<template>
  <div class="box">
     <nav @click="goBack">&lt;
   
     </nav>
        <p class="p">网易云课堂</p>
        <p class="loginMessage"></p>
    <header>
      <div class="map">
 <img :src="Classify01S02.img04" alt="">
      </div>
      <div class="map01">
        <p>{{Classify01S02.type}}</p>
        <p>购买后观看有效期至{{Classify01S02.time}}</p>
        <p>{{Classify01S02.price}}</p>
      </div>
    </header>
      <section>
        <h3>支付方式</h3>
        <p><span>微信支付</span> <input type="checkbox" name="vehicle" /></p>
        <p><span>支付宝</span> <input type="checkbox" name="vehicle" /></p>
        <p><span>花呗分期</span> <input type="checkbox" name="vehicle" /></p>
      </section>
    <p class="read">提交定后则表示您同意《网易云课堂用户服务协议》等</p>

     <footer>
    <div>实付金额: <span>{{Classify01S02.price}}</span> </div>
    <button>
      立即支付
    </button>
  </footer>
  </div>
 
</template>

<script>
export default {
  name: "Classify01S02",
  data() {
      return{
         Classify01S02:[]
      }

  },
  created(){
 let xhr = new XMLHttpRequest();

    xhr.open(
      "get",
      "http://localhost:3000/Classify07/" + this.$route.params.id,
      true
    );
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("xhr.responseText", xhr.responseText);
        this.Classify01S02 = JSON.parse(xhr.responseText);
        
        console.log(this.Classify01S02.type);
      }
    };
    xhr.send();
  },
  methods:{
     goBack() {
      this.$router.back();
    },
  }
};
</script>

<style scoped>
  *{
  margin: 0;
  padding: 0;
}
html{
  font-size: 26.67vw;
  height: 100%;
}
body{
  font-size: .16rem;
  height: 100%;
}
.p{
  background: white;
  text-align: center;
  line-height: 0.6rem;
  font-size: .2rem;
}
nav {
  margin: auto;
  font-size: 0.5rem;
  position: absolute;
  top: 0rem;
  left: 0.05rem;
  text-align: center;
  line-height: 0.35rem;
  color: rgb(43, 41, 41);
}
.box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header{
  width: 90%;
  margin: auto;
  height: 1rem;
  background: white;
  display: flex;
  justify-content: space-around;
  font-size: .12rem;
  margin-top: .3rem;
}
.map{
  width: 1rem;
  height: .5rem;
  margin-right: .1rem;
}
header p:nth-child(3){
  text-align: right;
  font-weight: bold;
}
header p:nth-child(1){
  font-weight: bold;
}
.map img{
  width: 100%;
  height: 100%;
}
section{
  width: 90%;
  margin: auto;
}
h3{
   line-height: .4rem;
}
section{
  background: white;
  display: flex;
  flex-direction: column;
}
section p{
  display: flex;
  justify-content: space-between;
  border-top: .01rem solid rgb(112, 109, 109);
  padding-top: .2rem;
  padding-bottom: .2rem;
}

.read{
  width: 90%;
  margin: auto;
  background: rgb(247, 245, 245);
  border-top: 1px solid rgb(112, 109, 109);
  margin-top: .3rem;
}

footer{
  width: 90%;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  margin-left: .2rem;
}
footer span{
  color: orangered;
  font-size: .2rem;
}
button{
  width: 1rem;
  height: .3rem;
  background: rgb(243, 11, 11);
  border-radius: 10%;
  border: none;
  color: white;
}
</style>
